<script setup lang="ts">
import {ElInput, ElPopover, ElButton} from "element-plus";
import SvgIcon from "@/components/svg-icon";
import {ref} from "vue";
import {getIconList} from "@/utils/tool";

const props = defineProps(["data", "callFun"])
const popoverEl = ref()
const iconList = ref<string[]>([])

iconList.value = getIconList()
function iconHandle(data: any){
  props.callFun(data)
  popoverEl.value.hide()
}
</script>

<template>
  <ElPopover placement="bottom-start" trigger="click" ref="popoverEl" width="40%">
    <template #reference >
      <ElInput :value="props.data" readonly placeholder="请选择图标"></ElInput>
    </template>
      <div class="menu_icon_inner">
        <div class="menu_icon_list">
          <el-button v-for="(item, index) in iconList"
                     :key="index"
                     :class="{ 'is-active': props.data === item }"
                     @click="iconHandle(item)">
            <svg-icon size="45px" :icon="item"></svg-icon>
          </el-button>
        </div>
      </div>
  </ElPopover>
</template>

<style scoped>
.menu_icon_inner{
  width: 100%;
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
}
.menu_icon_list{
  width: 100%;
  padding: 0;
  margin: -8px 0 0 -8px;
}
>>>.menu_icon_list > .el-button{
  padding: 8px;
  margin: 18px 0 0 8px;
  height: 50px;
  width: 50px;
}
</style>
